<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
  <link rel="stylesheet" href="style.scss">
  <title>徐帅-前端开发工程师-上海</title>
</head>

<body>
  <article id="app">
    <section class="bio">
      <h1>徐帅</h1>
      <img src="./images/cv.jpg" alt="1吋头像照片" />
      <p>男 | 31岁 | 前端开发工程师 | 上海</p>
      <p>手机 <a href="tel:13817431396">13817431396</a> | 微信 xmastan | 邮箱 <a
          href="mailto:xmasuhai@163.com">xmasuhai@163.com</a></p>
      <p>2008-2012 上海应用技术大学 机械学院 本科</p>
      <p>个人网站 <a href="http://xmasuhai.xyz">http://xmasuhai.xyz</a> </p>
    </section>

    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>轻UI</h3>
            <span>
              <a href="#">源码链接</a>
              <a href="#">项目预览</a>
            </span>
          </header>
          <p>
            一款基于 <strong>Vue3.0/React16</strong> /
            <strong>TypeScript</strong> / <strong>Webpack</strong> 的 UI
            框架。
          </p>
          <p>
            主要组件有日期选择器、弹出框，包括对话框、树形组件、日期选择器等常用组件<strong>下拉更新</strong>
          </p>
          <p>
            并使用了<strong>Cypress</strong>进行单元测试，有效提高前端团队的开发效率。
          </p>
          <p>
            制作过程让我对 TypeScript 和单元测试有了新的认识。
          </p>
          <p>
            我将其总结成了两篇博客<strong>《TS 泛型的使用》、《Webpack库模式》</strong>
          </p>
        </li>
        <li>
          <header>
            <h3>小番茄效率工具</h3>
            <span>
              <a href="#">源码私有</a>
              <a href="#">项目预览</a>
            </span>
          </header>
          <p>
            这是一个基于 <strong>React</strong> 和
            <strong>Vue</strong> 的多页面应用。
          </p>
          <p>
            主要功能包括微信登录、手机验证、直播、点播、答题系统、课程管理系统等。
          </p>
        </li>
        <li>
          <header>
            <h3>旺财记账</h3>
            <span>
              <a href="#">源码私有</a>
              <a href="#">项目预览</a>
            </span>
          </header>
          <p>
            一个基于 <strong>React</strong> /
            <strong>TypeScript</strong> 的移动端单页面应用。
          </p>

          <p>
            这是我从自己的需求出发，设计出的极简记账应用，特点是快速记账，
            可以通过图表查看用户消费习惯。
          </p>
          <p>
            该项目大量使用 <strong>React Hooks</strong>，让我对 Hooks
            有了深刻的理解和应用。
          </p>
        </li>
      </ol>
    </section>

    <section class="skills">
      <h2>技能 <small>博客+项目数</small></h2>
      <aside>
        <div id="tech" style="width: 700px; height: 300px;"></div>
        <div class="wrapper">
          <div id="skill"></div>
          <ul>
            <li>熟悉页面制作技巧，<strong>精确还原设计稿</strong></li>
            <li>
              熟悉<strong>前后端分离</strong>技术，
              AJAX、跨域、前端路由、Cookie、Session 等
            </li>
            <li>
              熟练掌握<strong>Vue全家桶</strong>的使用，
              VueCli、VueRouter、Vuex 等
            </li>
            <li>
              熟练掌握<strong>React全家桶</strong>的使用，
              create-react-app、ReactRouter、Redux 等
            </li>
            <li>熟悉 ES6，包括 let / Promise / await / 解构赋值 / async & await / class</li>
            <li>
              了解 <strong>TypeScript</strong> ，我的项目就是 TS 实现的
            </li>
            <li>了解 <strong>Webpack 的配置和优化</strong></li>
            <li>用过SnowPack/Rollup/Parcel</li>
          </ul>
        </div>
      </aside>

    </section>

    <section class="openSource page-break">
      <h2>开源项目</h2>
      <ul>
        <li>
          <header>
            <h3>社区</h3>
            <a href="#">源码链接</a>
          </header>
          <p>
            实现了元素选择、元素创建、<strong>事件委托</strong>、滑动手势等常见功能
          </p>
        </li>
        <li class="page2">
          <header>
            <h3>会动的卡通角色</h3>
            <span>
              <a href="https://github.com/xmasuhai/pikachu">源码链接</a>
              <a href="http://xmasuhai.xyz/pikachu/dist/index.html">项目预览</a>
            </span>
          </header>
          <p>这是我在学习 <strong>CSS3和动画</strong> 时制作的一个可爱作品</p>
        </li>
        <li>
          <header>
            <h3>达芬奇画板</h3>
            <span>
              <a href="#">源码链接</a>
              <a href="#">项目预览</a>
            </span>
          </header>
          <p>我在学习 <strong>Canvas</strong> 时做的一个小作品</p>
        </li>
      </ul>
    </section>

    <section class="others">
      <h2>其他链接</h2>
      <ul>
        <li>
          <a href="https://xmasuhai.xyz">我的博客</a>，目前已有 <strong>80+</strong> 篇技术文章
        </li>
        <li>
          <a href="https://github.com/xmasuhai">我的 GitHub</a>，过去三个月有
          <strong>180+</strong> 次提交
        </li>
      </ul>
    </section>

    <section class="jobs">
      <h2>工作经历</h2>
      <ol>
        <li>
          <header>
            <h3>CFT</h3>
            <h4>模具设计</h4>
            <span><time>2012年7月</time>~<time>至今</time></span>
          </header>
          <ul>
            <li>
              模具设计 制图
            </li>
          </ul>
        </li>
      </ol>
    </section>

    <section class="education page-after">
      <h2>教育经历</h2>
      <p>
        <span><time>2008年</time>~<time>2012年</time></span>
        上海应用技术大学 机械学院 本科
      </p>
    </section>
  </article>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>